啊啊啊~~今天差點發文啦!下午忙著討論專題，差一點就忘了要來更新發文了

廢話不多說，直接進入今天的主題吧!

代購網站除了警語很重要除外，其實首頁也要放一些會讓人吸睛的圖片。
因此今天就來加一個圖片牆吧!

.html

<div class="a">
     <div class="b">
         <div class="c" style="--i:0"></div>
         <div class="d" style="--i:1"></div>
         <div class="e" style="--i:2"></div>
         <div class="f" style="--i:3"></div>
         <div class="g" style="--i:4"></div>
         <div class="h" style="--i:5"></div>
     </div>
</div>

.css

.a{
    position: relative;
    perspective: 1600px;
    top: 220px;
    display: flex;
    justify-content: center;
    align-items: center;
   //新增一個區塊來放圖片們
}
.b{
    width: 500px;
    height: 300px;
    position: absolute;
    transform-style: preserve-3d;
    animation: a 40s infinite cubic-bezier(.7,0,.17,1);
    left: 100;
    //區塊內放的素猜基礎設定
}
.b div{
    position: absolute;
    background-size:contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 500px;
    height: 300px;
    align-items: center;
    margin: auto;
    float: left;
    transform: rotateY(calc(var(--i)*60deg)) translateZ(600px);
    //這個transform這個很重要，每個圖片旋轉的角度會在這裡這設定，因為我放六張照片，所以一張照片旋轉60度，依此類推
}
@keyframes a{
    0%{
        transform: translateZ(-100px) rotateY(0deg);
    }
    16%{
        transform: translateZ(-100px) rotateY(-60deg);
    }
    33%{
        transform: translateZ(-100px) rotateY(-120deg);
    }
    49%{
        transform: translateZ(-100px) rotateY(-180deg);
    }
    66%{
        transform: translateZ(-100px) rotateY(-240deg);
    }
    83%{
        transform: translateZ(-100px) rotateY(-300deg);
    }
    100%{
        transform: translateZ(-100px) rotateY(-360deg);
    }
    //每張照片移動後呈現的角度，但要依照可以整除360的數量比較好，因為轉到正面時才會是水平的喔!
}
.c{
    background-image: url("圖片路徑");
}
.d{
    background-image: url("圖片路徑");
}
.e{
    background-image: url("圖片路徑");
}
.f{
    background-image: url("圖片路徑");
}
.g{
    background-image: url("圖片路徑");
}
.h{
    background-image: url("圖片路徑");
}
//可以新增更多個，或是減少幾個都很彈性

今天的備註都放打在程式碼內喔!

成果展示:

圖片素材來源:
https://www.lovelive-anime.jp/news/?subcategory=goods

以上是我開賽的第九天，讓我們來期待第十天的到來吧!
加油、加油! 倒數21天。